<!-- 用户中心 -->
<template>
  <q-page>
    <div class="q-pa-lg">
      <q-form style="max-width: 450px" class="uc-form row q-col-gutter-x-md">
        <q-input v-model="dto.nickname" :rules="[required]" class="col-12 col-md-6"> <template #before>用户昵称</template> </q-input>
        <q-input v-model="dto.cellphone" :rules="[required, telephone]" class="col-12 col-md-6">
          <template #before>手机号码</template>
        </q-input>
        <q-input v-model="dto.avatar" class="col-12" :rules="[minLength(1)]"> <template #before>头像地址</template> </q-input>
        <q-input v-model="dto.email" :rules="[email]" class="col-12"> <template #before>电子邮箱</template> </q-input>
        <q-input v-model="dto.introduction" maxlength="150" counter type="textarea" rows="3" class="col-12">
          <template #before>个性签名</template>
        </q-input>
        <div class="full-width text-center">
          <q-btn label="保存" color="primary" icon="save" class="q-mr-xl" @click="handleSubmit" />
          <q-btn label="修改密码" color="secondary" :icon="mdiShieldEditOutline" class="q-ml-lg" @click="dialog = true" />
        </div>
      </q-form>
    </div>

    <q-dialog v-model="dialog" @hide="resetPwdForm">
      <q-card style="width: 350px">
        <q-toolbar> <q-toolbar-title>修改密码</q-toolbar-title> <q-btn v-close-popup icon="close" round flat /> </q-toolbar>

        <q-card-section class="q-pb-none">
          <q-form class="uc-form" @submit="handlePwd">
            <q-input v-model="pwdDto.oldPwd" :rules="[required]" type="password" autocomplete="off">
              <template #before>原密码</template>
            </q-input>
            <q-input v-model="pwdDto.newPwd" :rules="[required]" type="password" autocomplete="off" @blur="checkConfirmPwd">
              <template #before>新密码</template>
            </q-input>
            <q-input ref="confirmPwdRef" v-model="pwdDto.newPwdConfirm" :rules="newPwdRules" type="password" autocomplete="off">
              <template #before>新密码</template>
            </q-input>
            <q-card-actions align="right">
              <q-btn v-close-popup label="取消" />
              <q-btn label="确定" color="primary" type="submit" />
            </q-card-actions>
          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script lang="ts" setup>
  import { QInput } from 'quasar';
  import { onMounted, reactive, ref } from 'vue';
  import { mdiShieldEditOutline } from '@quasar/extras/mdi-v6';

  import { Message } from 'src/utils';
  import { useUserStore } from 'src/stores';
  import { useDialog } from 'src/composables';
  import { email, minLength, required, telephone } from 'src/utils/validator';
  import { UserDataDto, readUserCenterData, updatePassword, updateUserData } from 'src/api/system/user';

  defineOptions({ name: 'UserCenter' });

  const dto = ref<UserDataDto>({} as UserDataDto);
  onMounted(() => {
    readUserCenterData().then((data) => (dto.value = data));
  });

  function handleSubmit() {
    updateUserData(dto.value).then(() => {
      useUserStore().avatar = dto.value.avatar;
      Message.success('修改成功');
    });
  }

  // 修改密码
  const { dialog } = useDialog();
  const pwdDto = reactive({ oldPwd: '', newPwd: '', newPwdConfirm: '' });
  const newPwdRules = [required, (v: string) => v === pwdDto.newPwd || '两次新密码不一致'];

  function handlePwd() {
    updatePassword(pwdDto.oldPwd, pwdDto.newPwd).then(() => {
      Message.success('修改成功');
      dialog.value = false;
    });
  }

  const confirmPwdRef = ref<QInput>();
  function checkConfirmPwd() {
    if (pwdDto.newPwdConfirm) {
      confirmPwdRef.value?.validate();
    }
  }

  function resetPwdForm() {
    pwdDto.oldPwd = '';
    pwdDto.newPwd = '';
    pwdDto.newPwdConfirm = '';
  }
</script>

<style lang="scss" scoped>
  .uc-form :deep(.q-field__marginal) {
    font-size: 16px;
  }
</style>
